/// <reference path="references.scss" />

//
// Footer Styles
// --------------------------------------------------

#footer {
    --footer-bg: #{$footer-bg};
    --footer-color: #{$footer-color};
    --footer-social-bg: #{$footer-social-bg};
    --footer-social-color: #{$footer-social-color};
    --footer-line-color: #{shade-color($footer-bg, 8%)};
    --footer-title-color: var(--footer-color);
    --footer-title-font-size: #{$h5-font-size};
    --footer-title-font-weight: #{$font-weight-medium};
    --footer-link-font-size: 1rem;
    --footer-link-color: #{$footer-color-muted};
    --footer-link-hover-color: #{shade-color($footer-color-muted, 40%)};
    --footer-border-top: 1px solid rgba(0,0,0, 0.1);
    --footer-hr-opacity: 0; // a hr NEVER looks good in the footer

    --footer-bottom-bg: rgba(0,0,0, 0.03);
    --footer-bottom-color: #{lighten($footer-color-muted, 5%)};
    --footer-bottom-font-size: 90%;

    --link-color: var(--footer-link-color);
    --link-hover-color: var(--footer-link-hover-color);

    border-top: var(--footer-border-top);
    background-color: var(--footer-bg);
    color: var(--footer-color);

    &.footer-inverse {
        --footer-color: #{$footer-inverse-color};
        --footer-link-color: #{$footer-inverse-color-muted};
        --footer-link-hover-color: #{opacify($footer-inverse-color-muted, 0.2)};
        --footer-social-color: #{$footer-inverse-color-muted};
        --footer-social-bg: transparent;
        --footer-line-color: #{tint-color($footer-bg, 12%)};

        --footer-bottom-bg: rgba(255,255,255, 0.06);
        --footer-bottom-color: #{darken($footer-inverse-color-muted, 10%)};
    }
}

.footer-social-wrapper {
    @include rfs(2.5rem, padding-block);

    ~ .footer-main-wrapper {
        padding-top: 0;
    }
}

.footer-social {
    .btn-social:not(:hover):not(:active):not(:focus) {
        background-color: var(--footer-social-bg);
        color: var(--footer-social-color);
    }
}

.footer-main-wrapper {
    padding-top: 2rem;
}

.footer-main {
    .footer-title {
        margin-bottom: 1.25rem;
        color: var(--footer-title-color);
        font-weight: var(--footer-title-font-weight);
    }

    .footer-links {
        font-size: var(--footer-link-font-size);
    }

    hr {
        // a hr NEVER looks good in the footer
        opacity: var(--footer-hr-opacity);
    }
}

.footer-bottom-wrapper {
    //--link-color: var(--footer-link-hover-color);
    background: var(--footer-bottom-bg);
    color: var(--footer-bottom-color);
}

.footer-bottom {
    padding: 1rem 0;
    font-size: var(--footer-bottom-font-size);
}

@include media-breakpoint-up(md) {
    .footer-title {
        pointer-events: none !important;
    }
    .footer-bottom {
        margin-top: 1rem;
    }
}

@include media-breakpoint-down(sm) {
    .footer-main-wrapper {
        padding-top: 0;

        .nav-collapsible {
            border-color: var(--footer-line-color);
        }
    }

    .footer-main, 
    .footer-bottom {
        margin-inline: 0 !important;
        padding-inline: 0 !important;
        width: 100% !important;
		max-width: none;
    }

    .footer-bottom {
        padding-inline: 1rem !important;
    }

    .footer-main .footer-title {
        margin-bottom: 0;
        font-size: var(--footer-title-font-size);
    }
}

.footer-social .btn-social {
    display: inline-block;
    border-color: transparent !important;
    margin: 0.2rem 0.25rem;
    font-size: 16px;

    &:not(:focus-visible) {
        box-shadow: none;
    }
}